<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Order Manager</title>
    <link rel="stylesheet" href="../../layui-v2.9.10/layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }
        .layui-header {
            background-color: #303030;
            color: #fff;
            padding: 0 15px;
        }
        .layui-side, .layui-layout-admin .layui-body, .layui-footer {
            background-color: #f5f5f5;
            color: #333;
        }
        .layui-card-header {
            background-color: #303030;
            color: #fff;
        }
        .layui-card-body {
            background-color: #fff;
            color: #333;
        }
        .layui-layout-admin .layui-body {
            padding: 15px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 头部导航 -->
    <div class="layui-header">
        <jsp:include page="header.jsp" />
    </div>

    <!-- 侧边栏 -->
    <div class="layui-side">
        <jsp:include page="side.jsp" />
    </div>

    <!-- 主体内容区 -->
    <div class="layui-body" style="padding: 20px;">
        <!-- Main Content Area -->
        <div>
            <form class="layui-form layui-row layui-col-space16" method="post" action="../../GoodsSearchServlet.do">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="order_id" value="" placeholder="order_id" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="recipient_name" placeholder="recipient_name" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="date" readonly placeholder="Date" class="layui-input demo-table-search-date">
                    </div>
                </div>
                <div class="layui-btn-container layui-col-xs12">
                    <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                </div>
            </form>

            <h1 style="margin-bottom: 20px;">订单查询</h1>
            <div class="layui-card">
                <div class="layui-card-body">
                    <table id="searchResultsTable" class="layui-hide" lay-filter="searchResultsTable"></table>

                </div>
                <!-- 验证 JSTL 输出 -->

            </div>
        </div>
    </div>
    <h1 style="margin-bottom: 20px;">查询结果</h1>
</div>

<!-- layui 引入 -->
<<script src="../../layui-v2.9.10/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer'], function(){
        var table = layui.table;
        var layer = layui.layer;

        // 从 JSP 页面中获取 searchResults 数据
        var searchResults3 = [
            <c:forEach var="order" items="${searchResults3}" varStatus="status">
            {
                order_id: '${order.order_id}',
                user_id: '${order.user_id}',
                recipient_name: '${order.recipient_name}',
                recipient_address: '${order.recipient_address}',
                recipient_phone: '${order.recipient_phone}',
                notes: '${order.notes}',
                order_status: '${order.order_status}',
                order_date: '${order.order_date}',
                order_total: '${order.order_total}'
            }<c:if test="${!status.last}">,</c:if>
            </c:forEach>
        ];

        // 渲染表格
        table.render({
            elem: '#searchResultsTable',
            cols: [[
                {field: 'order_id', title: 'Order ID', width: 100, sort: true, fixed: 'left'},
                {field: 'user_id', title: 'User ID', width: 100},
                {field: 'recipient_name', title: 'Recipient Name', width: 150},
                {field: 'recipient_address', title: 'Recipient Address', width: 200},
                {field: 'recipient_phone', title: 'Recipient Phone', width: 150},
                {field: 'order_status', title: 'Order Status', width: 150},
                {field: 'notes', title: 'Notes', width: 200},
                {field: 'order_date', title: 'Order Date', width: 150},
                {field: 'order_total', title: 'Order Total', width: 100},
                {fixed: 'right', title: 'Actions', toolbar: '#actionButtons', width: 180}
            ]],
            data: searchResults3,
            page: true,
            skin: 'line',
            even: true
        });

        // 监听工具条
        table.on('tool(searchResultsTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'view'){
                viewOrder(data.order_id);
            } else if(obj.event === 'edit'){
                editOrder(data.order_id);
            } else if(obj.event === 'delete'){
                deleteOrder(data.order_id);
            }
        });

        // 查看订单
        function viewOrder(orderId){
            window.location.href = '<%= request.getContextPath() %>/ViewOrderServlet.do?id=' + orderId;
        }

        // 编辑订单
        function editOrder(orderId){
            window.location.href = '<%= request.getContextPath() %>/EditOrderServlet.do?id=' + orderId;
        }

        // 删除订单
        function deleteOrder(orderId){
            layer.confirm('确定要删除该订单吗？', function(index){
                // 实际操作的逻辑，这里可以是 AJAX 请求或者直接跳转等
                window.location.href = '<%= request.getContextPath() %>/DeleteOrderServlet.do?id=' + orderId;
                layer.close(index);
            });
        }
    });
</script>

<script type="text/html" id="actionButtons">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>



</body>
</html>
